<script setup>
import {useSidebarStore} from "@/stores/sidebar.js";
import {useMenuStore} from "@/stores/menu.js";
import {onMounted} from 'vue';

//按需引入图标
import {WindmillOne} from "@icon-park/vue-next";
import {ElMessage} from "element-plus";

const sidebarStore = useSidebarStore();
const menuStore = useMenuStore();

// 组件挂载时加载菜单数据
onMounted(async () => {
  try {
    await menuStore.loadMenuList();
  } catch (error) {
    console.error('加载菜单失败:', error);
    ElMessage.error('菜单加载失败，请刷新页面重试');
  }
});
</script>

<template>
  <div class="app-sidebar">
    <!-- logo区域  -->
    <div class="app-sidebar-logo-text" :class="{ 'is-collapsed': sidebarStore.isCollapse }">
      <WindmillOne :size="30" theme="filled" fill="#fff" class="app-sidebar-iconPark-icon logo-icon" role="img" aria-label="系统图标"/>
      <span v-if="!sidebarStore.isCollapse" class="logo-text">XXXXX系统</span>
    </div>

    <!-- 菜单区域 -->
    <div class="app-sidebar-content">
      <!-- 加载状态 -->
      <div v-if="menuStore.loading" class="menu-loading">
        <el-skeleton :rows="5" animated/>
      </div>

      <!-- 菜单列表 -->
      <template v-else>
        <el-menu
            v-if="menuStore.filteredMenuList && menuStore.filteredMenuList.length > 0"
            :default-active="$route.path"
            router
            :collapse="sidebarStore.isCollapse"
            :unique-opened="true"
            background-color="#2d333b"
            style="border: none"
            text-color="#fff"
            :active-text-color="'var(--menu-text-active)'"
            mode="vertical">

          <template v-for="item in menuStore.filteredMenuList" :key="item.index">
            <!-- 一级菜单项，如果有子菜单 -->
            <el-sub-menu v-if="item.children && item.children.length" :index="item.index">
              <template #title>
                <!-- 添加el-icon，处理折叠时icon图标不显示 -->
                <el-icon>
                  <component :is="item.icon" :size="22" v-bind="item.iconProps" class="app-sidebar-iconPark-icon"/>
                </el-icon>
                <span>{{ item.title }}</span>
              </template>

              <!-- 渲染二级菜单项 -->
              <template v-for="child in item.children" :key="child.index">
                <!-- 如果二级菜单还有子菜单（三级菜单） -->
                <el-sub-menu v-if="child.children && child.children.length" :index="child.index">
                  <template #title>
                    <el-icon>
                      <component :is="child.icon" :size="22" v-bind="child.iconProps" class="app-sidebar-iconPark-icon"/>
                    </el-icon>
                    <span>{{ child.title }}</span>
                  </template>


                  <!-- 渲染三级菜单项 -->
                  <el-menu-item v-for="grandchild in child.children" :key="grandchild.index" :index="grandchild.index">
                    <el-icon>
                      <component :is="grandchild.icon" :size="22" v-bind="grandchild.iconProps" class="app-sidebar-iconPark-icon"/>
                    </el-icon>
                    <span>{{ grandchild.title }}</span>
                  </el-menu-item>
                </el-sub-menu>


                <!-- 如果二级菜单没有子菜单 -->
                <el-menu-item v-else :index="child.index">
                  <el-icon>
                    <component :is="child.icon" :size="22" v-bind="child.iconProps" class="app-sidebar-iconPark-icon"/>
                  </el-icon>
                  <span>{{ child.title }}</span>
                </el-menu-item>
              </template>
            </el-sub-menu>

            <!-- 一级菜单项，如果没有子菜单 -->
            <el-menu-item v-else :index="item.index">
              <el-icon>
                <component :is="item.icon" :size="22" v-bind="item.iconProps" class="app-sidebar-iconPark-icon"/>
              </el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>

        <!-- 空状态处理 -->
        <div v-else class="menu-empty">
          <el-empty description="暂无菜单数据" :image-size="80"/>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.app-sidebar {
  height: 100%;
  background-color: var(--sidebar-bg);
  transition: width 0.3s ease;
  overflow: hidden;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;
  display: flex;
  flex-direction: column;
}

/* Logo 区域样式 */
.app-sidebar-logo-text {
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: white;
  font-size: 21px;
  flex-shrink: 0;
}

.logo-icon {
  margin: 0 7px 0 7px;
}

.app-sidebar-iconPark-icon {
  display: flex;
}

.app-sidebar-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

/* 菜单区域滚动条样式 */
.app-sidebar-content::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.app-sidebar-content::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 加载状态样式 */
.menu-loading {
  padding: 20px;
}

/* 错误状态样式 */
.menu-error {
  padding: 20px;
}

/* 空状态样式 */
.menu-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 菜单折叠动画优化 */
:deep(.el-menu--collapse .el-sub-menu__icon-arrow) {
  display: none;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 56px;
  background: var(--menu-bg);
  transition: background-color 0.1s ease;
  font-size: 15px;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: var(--menu-hover) !important;
}
</style>